<template>
    <div class="page">
        <p>拖拽交互</p>
        <div id="container"></div>
        <p>缩放功能展示</p>
        <div id="container1"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {}
    },
    methods: {
        draw() {
            let circles = [
                { cx: 150, cy: 200, r: 30 },
                { cx: 250, cy: 200, r: 30 }
            ]
            //预先定义好，svg的大小，以及 在svg内部作画的时候 各种padding的值
            let svgWidth = "100%",
                svgHeight = 400
            //使用d3创建一个svg元素
            let svg = (this.svg = d3.select("#container").append("svg"))
            //设置svg的宽高
            svg.attr("width", svgWidth).attr("height", svgHeight)
            svg.selectAll("circle")
                .data(circles)
                .enter()
                .append("circle")
                .attr("cx", d => d.cx)
                .attr("cy", d => d.cy)
                .attr("r", d => d.r)
                .attr("fill", "red")
                .call(
                    d3
                        .drag()
                        .subject((d, i) => {
                            //确定拖拽的中心点
                            console.log(d, i)
                            return { x: i.cx, y: i.cy }
                        })
                        .on("drag", function(event, d) {
                            //移动的时候 需要修改掉cx和xy的值，不然subject 钩子函数获取到的值就会不准确，导致移动开始的时候会有一个瞬移
                            d3.select(this)
                                .attr("cx", (d.cx = event.x))
                                .attr("cy", (d.cy = event.y))
                        })
                )
            d3.dragDisable(window)
        },
        drawZoom() {
            let circles = [
                { cx: 150, cy: 200, r: 30 },
                { cx: 220, cy: 200, r: 30 },
                { cx: 150, cy: 270, r: 30 },
                { cx: 220, cy: 270, r: 30 }
            ]
            //预先定义好，svg的大小，以及 在svg内部作画的时候 各种padding的值
            let svgWidth = "100%",
                svgHeight = 400
            //使用d3创建一个svg元素
            let svg = this.svg = d3.select("#container1").append("svg")
            //设置svg的宽高
            svg.attr("width", svgWidth).attr("height", svgHeight)
            let x = d3.scaleLinear().domain(0,svgWidth).range([0,20]),
            y = d3.scaleLinear().domain(0,svgHeight).range([0,20])
            let zoom = d3.zoom()
            .scaleExtent([1,10])
            .on('zoom',function(event){
                console.log(event)
                let transform = event.transform;
                transform.rescaleX(x);
                transform.rescaleY(y);
                console.log(transform)
                d3.select(this)
                .attr('transform',`${event.transform}`)
            })
            svg.append("g")
            .call(zoom)
                .selectAll("circle")
                .data(circles)
                .enter()
                .append("circle")
                .attr("cx", d => d.cx)
                .attr("cy", d => d.cy)
                .attr("r", d => d.r)
                .attr("fill", "red")
        }
    },
    mounted() {
        this.draw()
        this.drawZoom()
    }
}
</script>
